<#assign ctx = request.contextPath />
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 ,minimum-scale=1.0 ,maximum-scale=1.0" user-scalable=no>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>客户下单</title>
    <link href="${ctx}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${ctx}/assets/css/weixing.css" />
    <link rel="stylesheet" href="${ctx}/assets/css/sco.message.css" />
    	<style>
		/* autocomplete */
		div.ac {border: 1px solid #ccc;position: absolute;display: none;overflow: auto;background-color: #ffffff;z-index:998;}
		div.ac > ul {margin-top:10px;padding:0;}
		div.ac > ul > li {height:33px;line-height:33px;cursor:pointer;}
		div.ac > ul > li:hover{background:#eee;}
		div.ac > ul > li > div span {padding-left:15px;}
		div.ac > ul > li > div span em {color:red;font-style: normal;}
		#dor{
		width:18px;
		height:18px;
		}
		#dor-satr{
		 margin-top:5px;
		 margin-left: 10px;
		}
		.form-control {
		color: #000000;
		}
	</style>
  </head>
  <body>
  <form id="weixin_form"  action="${ctx}/wx/v1/orderData" method="post">
  		<input type="hidden" id="wxuser" name="wxuser">
		<input type="hidden" id="lng"/>
		<input type="hidden" id="lat"/>
	  	<div class="customer">
		  		<h3 id="text"></h3>
		  		<div class="form-group">
				    <input id="place" class="form-control floating-label" type="text" placeholder="当前位置定位中.." >
				</div>
		    	<div class="input-group">
			      <input id="telephone" type="text" class="form-control" placeholder="输入手机号码" >
			      <span class="input-group-btn">
			        <button id="yzNumber" class="btn btn-default" type="button">获取验证码</button>
			      </span>
			    </div><!-- /input-group -->
				<div class="form-group">
				    <input id="vcode" class="form-control floating-label" type="text"placeholder="请输入验证码"  >
				</div>
		</div>
		<#if zhuanMethod() >
			<label class="radio-inline" style="margin-left: 15px;">
			  <input id="dor" type="radio" name="OrderType" value="daijia" checked="checked"> 
			  <h5 id="dor-satr">代驾</h5>
			</label>
			<label class="radio-inline" style="margin-left: 30px;">
			  <input id="dor" type="radio" name="OrderType" value="zhuanche">
			  <h5 id="dor-satr">专车</h5>
			</label>
		<#else>
			<label class="radio-inline" style="margin-left: 15px;">
			  <input type="hidden" name="OrderType"  value="daijia">
			</label>
		</#if>
		
		<div class="denglu">
			<button type="button" class="btn btn-default btn-block" id="submit_form"><b  style="color: #FFFFFF;">确认下单</b></button>
		</div>
	</form>	
  </body>
</html>
<script src="${ctx}/assets/js/jquery-1.11.0.min.js"></script>
<script src="${ctx}/assets/js/bootstrap.min.js"></script>
<script src="${ctx}/assets/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="${ctx}/assets/js/jquery.autocomplete.min.js"></script>
<script src="${ctx}/assets/js/sco.message.js"></script>
<script type="text/javascript">
window.daijia = {ctx:'${ctx}'};
</script>
<script charset="utf-8" type="text/javascript" src="${ctx}/assets/js/wxcommon.js" ></script>
<script type="text/javascript">

	var base_url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=${setting.wxAppId?if_exists}&redirect_uri="+URLEncode('${setting.wxServer?if_exists}wx/v1/memberOrder')+"&response_type=code&scope=snsapi_base&state=null#wechat_redirect";
	
	var _obj = em.UrlGet();
	
	if(em.is_weixin()&&_obj.code){
		$.post('${ctx}/wx/v1/userInfo',{'code':_obj.code},function(data){
			if(data.object){
				$("#wxuser").val(data.object.openId);
				$("#telephone").val(data.object.phone);
			}
		},'json');		
	}
	else{
		if(em.is_weixin()){
			window.location.replace(base_url);
		}		

	}
	
	
	//事先定位一次
	locationMe();
	//每隔2S定位一次
	var interval = setInterval(function(){
		if(!window._coords){
			locationMe();
		}else{
			clearInterval(interval);
		}
	},2000); //2s
	
	$("#yzNumber").bind('click',function(){
			var phone=$("#telephone").val();
			var regex = /^1\d{10}$/;
			if(regex.test(phone) && phone.length==11){
				$.get('${ctx}/wx/v1/sendVcode',{'phone':phone},function(data){
				
					if(data.success){
						$.scojs_message("验证码已发送成功", $.scojs_message.TYPE_OK);
						calculagraph(0);
					}
					else{
						if(data.errorcode=="0"){
							calculagraph(data.object);
						}
						else if(data.errorcode=="1"){
							$.scojs_message("短信发送失败，请稍后再试", $.scojs_message.TYPE_ERROR);
						}
					}
				
				});	
			}
			else{
				$.scojs_message("号码输入错误，请重新输入！", $.scojs_message.TYPE_ERROR);
			}
		});
		
		$("#submit_form").click(function(){
		$('#loadblacklayer').show();
		
		var address =$("#place").val();
		if(address == ""){
			$.scojs_message("请输入你要预约的位置！", $.scojs_message.TYPE_ERROR);
			return;
		}
		var phone = $("#telephone").val();
		if (phone == "" || phone.length != 11){
			$.scojs_message("请正确填写电话号码！", $.scojs_message.TYPE_ERROR);
			return;
		}
		
		if(($("#vcode").val()).length==0 || $("#vcode").val().length!=4){
			$.scojs_message("请正确输入验证码！", $.scojs_message.TYPE_ERROR);
			return;
		}
		
		var lat = $("#lat").val();
		var lng = $("#lng").val();
		
		var type=$("input[name='OrderType']:checked").val();
		if(type==null){
			type='daijia';
		}
		
		if(lat == "" || lng == ""){
			$.scojs_message("请先选择您要预约的位置", $.scojs_message.TYPE_ERROR);
			return;
		}
		var params = {clientPhone:phone,place:$("#place").val(),
			latitude:$("#lat").val(),longitude:$("#lng").val(),vcode:$("#vcode").val(),wxuser:$("#wxuser").val()
			,OrderType:type};
		
		$('#loadblacklayer').show();
		
		$.post('${ctx}/wx/v1/orderData',params,function(data){
			
			if(data.errorcode=='outTime'){
				$('#loadblacklayer').hide();
				$.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
				
			}
			else if(data.errorcode=='error'){
				$('#loadblacklayer').hide();
				$.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
			}
			else if(data.errorcode=='help'){
				$('#loadblacklayer').hide();
				$.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
			}
			else{
				if(data.success){
					
					$('#loadblacklayer').hide();
					window.location.href='${ctx}/wx/v1/successes';
				}
				else{
					$('#loadblacklayer').hide();
					$.scojs_message("系统繁忙，稍后重试", $.scojs_message.TYPE_ERROR);
				}
			}
			
			});
	
		});
		$('#place').AutoComplete({
		    'data': '${ctx}/wx/v1/getAddress',
			ajaxDataType: 'json',
			ajaxParams:function(keyword){
				return {'city':$("#place").val()};
			},
		    'width': 'auto',
		    'async': true,
		    'listStyle': 'custom',
		    'emphasis': false,
		    'matchHandler': function(keyword, data){
		        return true;
		    },
		    'createItemHandler': function(index, data){
		    	return "<span>"+data.name+"</span>";
		    },
		    'afterSelectedHandler': function(data){
		    	$('#place').val(data.name);
		    	$('#lng').val(data.lng);
		    	$('#lat').val(data.lat);
		    }
		}).AutoComplete('show');
</script>
